<template>
    <page-main title="工作任务" title-icon="dashboard">
        <el-row :gutter="20">
            <el-col :md="11">
                <el-card header="实训审阅" shadow="hover" style="margin-bottom: 16px;">
                    <el-tabs v-model="taskDetailReview.defaultTab" type="card">
                        <el-tab-pane v-for="item in taskDetailReview.tab" :key="item.id" :label="item.label"
                                     :name="item.id"
                        >
                            <table-pane :table-title-data="tableTitleData" :table-data="taskDetailReview.tableData">
                                <div slot="actions" slot-scope="{scope}">
                                    <el-tag :type="scope.row.isReview ? '':'danger'">
                                        {{ scope.row.isReview ? '已审阅' : '未审阅' }}
                                    </el-tag>
                                </div>
                            </table-pane>
                        </el-tab-pane>
                    </el-tabs>
                </el-card>
                <el-card header="教学跟踪" shadow="hover"/>
            </el-col>
            <el-col :md="13">
                <el-card header="详细内容" shadow="hover">
                    <div ref="preview" class="doc">
                        <input ref="file" type="file" @change="preview">
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </page-main>
</template>

<script>
import PageMain from '@/components/PageMain'
import TablePane from '@/components/tablePanel/table'

const docx = require('docx-preview')
export default {
    components: {TablePane, PageMain},
    data() {
        return {
            taskDetailReview: {
                tab: [
                    {
                        label: '全部',
                        id: '0'
                    },
                    {
                        label: '程海超',
                        id: '1'
                    },
                    {
                        label: '宋明宇',
                        id: '2'
                    }
                ],
                defaultTab: '0',
                tableData: [
                    {
                        date: '2016-05-02',
                        number: '王小虎',
                        content: '匀速圆周运动教学设计',
                        isReview: true
                    }, {
                        date: '2016-05-04',
                        number: '王小虎',
                        content: '匀速圆周运动教学设计',
                        isReview: false
                    }, {
                        date: '2016-05-01',
                        number: '王小虎',
                        content: '匀速圆周运动教学设计',
                        isReview: true
                    }, {
                        date: '2016-05-03',
                        number: '王小虎',
                        content: '匀速圆周运动教学设计',
                        isReview: false
                    }]
            },
            tableTitleData: [
                {
                    value: 'date',
                    label: '日期'
                },
                {
                    value: 'content',
                    label: '内容'
                },
                {
                    value: 'number',
                    label: '提交人'
                },
                {
                    value: 'actions',
                    label: '审阅状态',
                    slotName: 'actions'
                }
            ]
        }
    },
    mounted() {
    },
    methods: {
        preview() {
            docx.renderAsync(this.$refs.file.files[0], this.$refs.preview) // 渲染到页面预览
        }
    }
}
</script>

<style scoped>
::v-deep .el-card__header {
    border-bottom: none;
}
.doc {
    height: 500px;
    overflow-x: auto;
}
</style>
